<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./echarts/echarts.min.js"></script>
    <script src="./layui/layui.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1000px;height:600px; margin: 0 auto"></div>
<script type="text/javascript">
    layui.use(['element', 'layer', 'util', 'jquery'], function () {
        // 基于准备好的dom，初始化echarts实例
        var $ = layui.$;
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {
            title: {
                text: '售出情况'
            },
            tooltip: {},
            legend: {
                data: ['在售', '已售出']
            },
            xAxis: {
                axisLabel: {
                    interval: 0, //代表显示所有x轴标签显示
                },
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '在售',
                    type: 'bar',
                    data: []
                },
                {
                    name: '已售出',
                    type: 'bar',
                    data: []
                }
            ]
        };
        $.ajax({
            type: 'post',
            async: true,
            url: 'commodity/getCount',
            data: {},
            success: function (data) {
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: data.data["categoryName"]
                    },
                    series: [
                        {
                            data: data.data["sale"]
                        },
                        {
                            data: data.data["sold"]
                        }
                    ]
                });
            }, error: function () {
                console.log(2222222);
            }
        });

        myChart.setOption(option);
    })
</script>


</body>
</html>